<template>
  <div class="account-management">
    <my-bread-crumb>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    </my-bread-crumb>
    <el-card class="box-card">
      <!-- 查询栏     -->
      <el-row :gutter="20">
        <el-col :span="21">
          选择账号锁定情况：
          <el-select v-model="params.isLocked" placeholder="请选择" @change="selectChange">
            <el-option
              label="锁定"
              :value="1">
            </el-option>
            <el-option
              label="未锁定"
              :value="0">
            </el-option>
            <el-option
              label="全部"
              :value="-1">
            </el-option>
          </el-select>
        </el-col>
<!--        <el-col :span="3"><el-button type="primary">导出execl文件</el-button></el-col>-->
      </el-row>
      <!-- 表单栏    -->
      <el-table
        :data="result.records"
        stripe
        max-height="410"
        @sort-change="dateSortChange">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="userInfo.name" label="姓名"></el-table-column>
        <el-table-column prop="userInfo.gender" label="性别"></el-table-column>
        <el-table-column prop="userInfo.identityCategory" label="身份类别"></el-table-column>
        <el-table-column prop="userInfo.department" label="学院"  width="200px"></el-table-column>
        <el-table-column prop="userInfo.classname" label="班级"  width="200px"></el-table-column>
        <el-table-column label="锁定状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isLocked"
                       :active-value="1"
                       :inactive-value="0"
                       @change="lockStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"
                         :formatter="dateFormatter" width="180px" sortable="custom"></el-table-column>
      </el-table>
      <!-- 分页条   -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getAccountWithUserInfo,updateIsLocked} from '@/network/admin'
import {formatDate} from '@/common/utils'
import MyBreadCrumb from "@/components/MyBreadCrumb";
export default {
  name: "AccountManagement",
  components: {MyBreadCrumb},
  data(){
    return{
      params:{
        current:1,
        size:10,
        isLocked:-1,
        order:''
      },
      result:{
        records:[],
        total:0,
        pages:1
      }
    }
  },
  created(){
   this.getAccountList();
  },
  methods:{
    //获取账号信息
    async getAccountList(){
      const {data,code} = await getAccountWithUserInfo(this.params);
      if(code==200){
        // console.log(new Date(Date.parse(data.records[0].createTime)));
        this.result.records=data.records;
        this.result.total=data.total;
        this.result.pages=data.pages;
      }
      else{
        return this.$message.error('获取账号列表失败！');
      }
    },
    // 每页大小改变
    handleSizeChange(val){
      this.params.size=val;
      this.params.current=1;
      this.getAccountList();
    },
    //页码值改变
    handleCurrentChange(val){
      this.params.current=val;
      this.getAccountList();
    },
    //更新锁定状态
    async lockStateChanged(row){
      let params = {accountId:row.userInfo.accountId,isLocked:row.isLocked}
      const {code,msg} = await updateIsLocked(params);
      if(code==200){
        this.$message({type:'success', message:msg,duration:1000})
      }
      else{
        if(row.isLocked===1) row.isLocked=0;
        else row.isLocked=1;
        this.$message.error({message:msg, duration:1000});
      }
    },
    //选中状态更新
    selectChange(){
      this.params.current=1;
      this.getAccountList();
    },
    // 时间格式化
    dateFormatter(row,column){
      return formatDate(new Date(Date.parse(row.createTime)),"yyyy-MM-dd hh:mm:ss");
    },
    //日期排序改变
    dateSortChange(column){
      console.log(column);
      if(column.order){
        if(column.order=="ascending"){
          this.params.order="asc";
        }
        if(column.order=="descending"){
          this.params.order="desc";
        }
      }
      else column.order="";
      this.params.current=1;
      this.getAccountList();
    }
  }
}
</script>

<style scoped>

</style>
